<!--
 * 弹出对话框
 * @Author: xurenda <xurenda@qq.com>
 * @HomePage: https://xurenda.top
 * @Github: https://github.com/xurenda
 * @Date: 2019-12-06 16:53:41
 * @LastEditTime: 2019-12-06 20:23:11
 * @FilePath: \elegant-surf\src\components\common\_layout.vue
 -->
<template>
<section class="modal-wrapper">
  <div class="modal">
    <div class="title">
      <slot name="title"></slot>
    </div>
    <div class="body">
      <slot></slot>
    </div>
    <div class="buttons">
      <slot name="buttons"></slot>
    </div>
  </div>
</section>
</template>

<script>
export default {
  name: 'modal'
}
</script>

<style lang="stylus">
.modal-wrapper
  position fixed
  top 0
  left 0
  z-index 99999
  width 100vw
  height 100vh
  background-color rgba(0, 0, 0, .2)
  .modal
    position fixed
    top 20%
    left 50%
    width 550px
    transform translateX(-50%)
    padding 20px
    box-sizing border-box
    background-color #fff
    border 1px solid #ccc
    border-radius 5px
    box-shadow 0 0 10px #ccc
    .title
      font-weight 700
    .body
      margin 20px 0
    .buttons
      display flex
      justify-content flex-end
      button
        all unset
        cursor pointer
        padding 6px 12px
        background-color #1973e8
        border-radius 4px
        color #fff
        font-size 0.8em
        margin-right 20px
        &:last-of-type
          margin-right 0
    .message
      text-indent 2em
    label
      div
        font-size 0.9em
        margin-bottom 6px
      input
        all unset
        width 100%
        box-sizing border-box
        border 1px solid #ccc
        border-radius 4px
        padding 4px 8px
</style>